<template>
  <div class="mixin-components-container">
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-card class="box-card" style="margin-bottom:20px;">
          <div slot="header" class="clearfix">
            <span>SPI</span>
          </div>
          <div>
            <el-form-item label="服务ID" class="is-required">
              <el-input v-model.number="form.id" placeholder="请输入一个整数" />
            </el-form-item>
            <el-form-item label="服务名称" class="is-required">
              <el-input v-model="form.ServiceName" placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="协议名称" class="is-required">
              <el-input v-model="form.ProtocolName" :disabled="true" />
            </el-form-item>
            <el-form-item label="协议编号" class="is-required">
              <el-input v-model="form.ProtocolNum" :disabled="true" />
            </el-form-item>
            <el-form-item label="服务地址" class="is-required">
              <el-input v-model="form.ServiceAddress" placeholder="请输入服务地址" />
            </el-form-item>
            <el-form-item label="bus编号" class="is-required">
              <el-input v-model="form.ProtocolData.SPIBus" placeholder="请输入bus编号" />
            </el-form-item>
            <el-form-item label="device编号" class="is-required">
              <el-input v-model="form.ProtocolData.SPICh" placeholder="请输入device编号" />
            </el-form-item>
            <el-form-item label="单字节大小" class="is-required">
              <el-input v-model="form.ProtocolData.BitsPerWord" placeholder="请输入单字节大小" />
            </el-form-item>
            <el-form-item label="串口最大频率" class="is-required">
              <el-input v-model="form.ProtocolData.MaxSpeedHz" placeholder="请输入串口最大频率" />
            </el-form-item>
            <el-form-item label="模式" class="is-required">
              <el-select v-model.number="form.ProtocolData.Mode" placeholder="请选择模式">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
                <el-option label="2" :value="2" />
                <el-option label="3" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="单词读取字符" class="is-required">
              <el-input v-model="form.ProtocolData.Readbytes" placeholder="请输入单次读取字符大小" />
            </el-form-item>
            <el-form-item label="小端模式" class="is-required">
              <el-select v-model="form.ProtocolData.lsbfirst">
                <el-option label="false" :value="false" />
                <el-option label="true" :value="true" />
              </el-select>
            </el-form-item>
            <el-form-item label="Protocol" class="is-required">
              <el-select v-model="form.ProtocolData.Rule[0].Protocol" placeholder="请选择Protocol">
                <el-option label="TCP" value="TCP" />
                <el-option label="UDP" value="UDP" />
              </el-select>
            </el-form-item>
            <el-form-item label="Host" class="is-required">
              <el-input v-model="form.ProtocolData.Rule[0].Host" placeholder="请输入host" />
            </el-form-item>
            <el-form-item label="Port" class="is-required">
              <el-input v-model.number="form.ProtocolData.Rule[0].Port" placeholder="请输入port" />
            </el-form-item>
            <el-form-item label="BufSize" class="is-required">
              <el-input v-model.number="form.ProtocolData.Rule[0].BufSize" placeholder="请输入BufSize" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即提交</el-button>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: { },
  data() {
    return {
      form: {
        id: undefined,
        ServiceName: '',
        ProtocolName: 'SPI',
        ProtocolNum: '1004',
        ServiceAddress: '',
        ProtocolData: {
          ProtocolNum: '1004', // string 协议编号
          ProtocolName: 'SPI', // string 协议名称
          SPIBus: '0', // bus编号，（可选项0，1，或自定义，默认0）
          SPICh: '0', // device编号 （可选项0，1，或自定义，默认0）
          BitsPerWord: '8', // 单字节大小，默认8，可自定义
          MaxSpeedHz: '976000', // 设置spi串口最大频率，默认976000Hz,可自定义
          Mode: '0', // 模式选择（可选项0，1，2，3，默认0）
          Readbytes: '8', // 用于确定单次读取几个字符，可自定义，默认8
          lsbfirst: false, // lsb first就是小端模式，一个多字节数据的低字节在前，高字节在后,默认False，可选项True,Flase
          Rule: [
            {
              Protocol: '', // tcp或者udp
              Host: '', // ip地址
              Port: undefined, // int 端口号
              BufSize: undefined // int 缓冲区大小
            }
          ]
        }
      },
      rules: {
        service_id: [{ required: true, message: '请输入服务ID', trigger: 'blur' }],
        service_name: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
        protocol_name: [{ required: true, message: '请选择协议名称', trigger: 'blur' }],
        protocol_num: [{ required: true, message: '请选择协议名称', trigger: 'blur' }],
        service_host: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
        service_port: [{ required: true, message: '请输入端口号', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form)
      axios({
        method: 'post',
        url: 'http://192.168.10.152:5002/protocol/add_protocol',
        data: this.form
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success('添加成功')
          setTimeout(() => {
            this.$router.push({
              path: '/protocol/table'
            })
          }, 1000)
        } else {
          this.$message.error('该服务id已存在，请重新添加!')
        }
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item{
  min-height: 100px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

